<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm
          v-model="queryParams"
          :options="options.formOps"
          @onQuery="getList"
          @onResetQuery="resetQuery"
        >
          <template #default="{ filterForm }">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="filterForm.startTime"
                type="datetime"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="filterForm.endTime"
                type="datetime"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </template>
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <Table
          ref="table"
          :auto-featch="true"
          :fetch-data="fetchData"
          :options="options.table"
          actionWidth="100"
          :use-action="false"
        >
          <template #yxCondition="{ row }">
            <div style="color: red" v-if="row.yxCondition == '差'">
              {{ row.yxCondition }}
            </div>
            <div style="color: greenyellow" v-if="row.yxCondition == '优'">
              {{ row.yxCondition }}
            </div>
            <div style="color: blue" v-if="row.yxCondition == '良'">
              {{ row.yxCondition }}
            </div>
          </template>
          <template #actionButton="{ row }">
            <el-button type="text" @click="handleEdit(row)">详情</el-button>
          </template>
        </Table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Table from "@/components/Table/index.vue";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/yhpc/yxjz";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import SearchForm from "./components/searchForm.vue";
const { proxy } = getCurrentInstance();
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});

const options = reactive({
  table: ops,
  formOps: ops.filter((i) => [].includes(i.prop)),
});
const dialogVform = ref();
const table = ref();
const getTime = () => {
  // 获取当前日期对象
  var currentDate = new Date();

  // 获取当前日期是所在周的第几天 (0~6，0表示周日)
  var currentDay = currentDate.getDay();

  // 计算上一周的开始日期
  var startOfLastWeek = new Date(currentDate);
  startOfLastWeek.setDate(currentDate.getDate() - currentDay - 6);

  // 计算上一周的结束日期
  var endOfLastWeek = new Date(startOfLastWeek);
  endOfLastWeek.setDate(startOfLastWeek.getDate() + 6);

  // 格式化日期为字符串（YYYY-MM-DD）
  var formattedStartDate = startOfLastWeek.toISOString().split("T")[0];
  var formattedEndDate = endOfLastWeek.toISOString().split("T")[0];
  queryParams.value.startTime = `${formattedStartDate} 00:00:00`;
  queryParams.value.endTime = `${formattedEndDate} 23:59:59`;
  // 打印上一周的开始日期和结束日期
  // console.log("上一周的开始日期：" + formattedStartDate);
  // console.log("上一周的结束日期：" + formattedEndDate);
};
const { fetchData, handleEdit, getList, queryParams, form, handleExport } =
  useAsyncData({
    APIS: {
      query: APIS.query2,
      fullUrl: "/preventionPlanTask/exportPost",
    },
    formJson,
    dialogVform,
    table,
    proxy,
  });
const resetQuery = () => {
  getTime();
  getList();
};
onMounted(() => {
  resetQuery();
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
